<template>
	<view class='apply_withdrawal' v-if="showContent">
		<view class='apply_money'>
			<view class='apply_tit'>提现金额</view>
			<view class='apply_num'>
				<view class='apply_symbol'>￥</view>
				<view class='apply_inp'>
					<input type="digit" v-model="inpNum"></input>
				</view>
			</view>
			<view class='sum'>可提现金额{{info.money}}.00元</view>
		</view>

		<view class='pattern_payment'>
			<view class='payment_box'>
				<view class='payment_item'>
					<view class='item_middle'>支付宝收款</view>
					<view class='item_rt circle bg'></view>
				</view>
			</view>
		</view>

		<view class='apply_btn'>
			<button class='btn' @click='submitMoney'>申请提现</button>
			<view class='hint'>审核成功后，将在两小时内到账</view>
		</view>

		<u-popup v-model="show" mode="center" width="600rpx" height="300rpx" border-radius="20" closeable>
			<view class="password-view">
				<u-message-input fontSize="40" width="60" :maxlength="6" :breathe="true" @finish="finish" :dot-fill="true"></u-message-input>
				<view class="tips">请输入支付密码</view>
			</view>
		</u-popup>
		<pt-loading></pt-loading>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				show: false,
				showContent: false,
				inpNum: 0,
				info: ''
			};
		},
		onShow() {
			this.init()
		},
		methods: {
			init() {
				this.$u.apiWei.MyWallet().then(res => {
					this.info = res.datas
					this.showContent = true
				})
			},
			submitMoney() {
				if (this.inpNum == 0) {
					uni.showToast({
						title: '提现金额不能为0',
						icon: "none",
						duration: 1000,
						mask: true
					})
					return
				}
				if (this.info.money == 0 || this.inpNum > this.info.money) {
					uni.showToast({
						title: '不好意思，您没有足够的提现余额',
						icon: "none",
						duration: 1000,
						mask: true
					})
					return
				}
				this.show = true
			},
			finish(e) {
				let data = {
					privat_key: e,
					money: this.inpNum,
					pay_client: 1
				}
				this.$u.apiWei.WalletWithdrawal(data).then(res => {
					uni.showToast({
						title: res.datas,
						icon: "none",
						duration: 1000,
						mask: true
					})
					this.show = false
					this.init()
				})
			}
		}
	}
</script>

<style lang="scss">
	.apply_withdrawal {
		.apply_money {
			width: 100%;
			background-color: #fff;
			padding: 32rpx 40rpx;
			color: #5E5E5E;
			margin-top: 10rpx;
		}

		.apply_tit {
			font-size: 24rpx;
		}

		.apply_num {
			display: flex;
			font-size: 76rpx;
			padding-top: 50rpx;
			border-bottom: 1px solid #D2D2D2;
			padding-bottom: 10rpx;
			margin-bottom: 22rpx;
		}

		.apply_symbol {
			height: 100rpx;
			line-height: 100rpx;
		}

		.apply_inp input {
			height: 100rpx;
			line-height: 100rpx;
			font-size: 50rpx;
			font-weight: bold;
		}

		.sum {
			color: #C1C1C1;
			font-size: 24rpx;
		}

		.pattern_payment {
			font-size: 24rpx;
			color: #5E5E5E;
			background-color: #fff;
			padding: 0 40rpx;
			margin-top: 10rpx;
		}

		.payment_tit {
			padding: 32rpx 0;
		}

		.payment_item {
			display: flex;
			align-items: center;
			height: 106rpx;
			border-bottom: 1px solid #EEEEEE;
		}

		.payment_item:last-child {
			border-bottom: 0;
		}

		.item_middle {
			flex: 1;
			line-height: 24rpx;
		}

		.circle::after {
			display: block;
			content: "";
			width: 20rpx;
			height: 20rpx;
			border: 1px solid #C1C1C1;
			border-radius: 50%;
			margin-right: 10rpx;
		}

		.circle.bg::after {
			background-color: #141414;
			border-color: #141414;
		}

		.apply_btn {
			margin-top: 34rpx;
			text-align: center;
			font-size: 24rpx;
			color: #5E5E5E;
		}

		.apply_btn .btn {
			width: 560rpx;
			height: 90rpx;
			line-height: 90rpx;
			background-color: #141414;
			font-size: 28rpx;
			margin-bottom: 24rpx;
			border-radius: 6rpx;
			color: #fff;
		}

		.set_pwd {
			text-align: center;
		}

		.render-wrap {
			display: flex;
			width: 100%;
			margin: 0 auto;
			position: relative;
		}

		.pwd_tit,
		.code_tit {
			font-size: 30rpx;
			color: #5E5E5E;
			padding: 50rpx 0 50rpx;
		}

		.render-input {
			flex: 1;
			height: 100rpx;
			border-bottom: 1rpx solid #c1c1c1;
			border-left: none;
			box-sizing: border-box;
			text-align: center;
			margin: 0 20rpx;
		}


		.hidden-input {
			position: absolute;
			width: 0;
			height: 0;
			z-index: 10;
		}


		.modal {
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.modal_cen {
			width: 600rpx;
			background-color: #fff;
			border-radius: 10rpx;
			padding: 80rpx 40rpx 60rpx;
			position: relative;
			z-index: 10;
		}

		.modal_hidden {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
		}

		.tit {
			font-size: 28rpx;
			text-align: center;
			color: #5E5E5E;
		}

		.password-view {
			padding-top: 100rpx;

			.tips {
				margin-top: 20rpx;
				text-align: center;
				color: red;
			}
		}
	}
</style>
